<!DOCTYPE html>
<!-- 网页使用的语言 -->
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
    <head>
    	
        <!-- 指定字符集 -->
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>修改用户</title>

        <link href="/css/bootstrap.min.css" rel="stylesheet">
        <!-- 2. jQuery导入，建议使用1.9以上的版本 -->
        <script src="/js/jquery-2.1.0.min.js"></script>
        <!-- 3. 导入bootstrap的js文件 -->
        <script src="/js/bootstrap.min.js"></script>
        
    </head>
    <body>
        <div class="container" style="width: 400px;">
        <h3 style="text-align: center;">修改联系人</h3>
        <form id="form">
            <div style="display:none;" class="form-group">
                <label for="name">姓名：</label>
                <input type="text" class="form-control" id="id" th:value="${student.id}" name="id"  readonly="readonly" placeholder="请输入姓名" />
            </div>
          <div class="form-group">
            <label for="name">姓名：</label>
            <input type="text" class="form-control" id="name" th:value="${student.name}" name="name"  readonly="readonly" placeholder="请输入姓名" />
          </div>
            <div class="form-group">
                <label>选择头像：</label>
                <input type="file" name="file">
                <div>
                    <img id="img" style="width: 160px;height: 90px;" th:src="|/download/image?path=${student.image}|" alt=""/>
                </div>
            </div>

          <div class="form-group">
            <label>性别：</label>
              <input type="radio" name="sex" th:checked="${student.sex == '男'} " value="男"  />男
                <input type="radio" name="sex" th:checked="${student.sex == '女'}"  value="女"  />女
          </div>

          <div class="form-group">
            <label for="age">年龄：</label>
            <input th:value="${student.age}" type="text" class="form-control" id="age"  name="age" placeholder="请输入年龄" />
          </div>

          <div class="form-group">
            <label for="address">籍贯：</label>
             <select id="address" th:value="${student.address}" name="address" class="form-control" >
                <option th:selected="${student.address} == '广东'" value="广东">广东</option>
                <option th:selected="${student.address} == '广西'" value="广西">广西</option>
                <option th:selected="${student.address} == '湖南'" value="湖南">湖南</option>
                 <option th:selected="${student.address} == '河南'" value="河南">河南</option>
                 <option th:selected="${student.address} == '美国'" value="美国">美国</option>
            </select>
          </div>

          <div class="form-group">
            <label for="qq">QQ：</label>
            <input id="qq" th:value="${student.qq}" type="text" class="form-control" name="qq" placeholder="请输入QQ号码"/>
          </div>

          <div class="form-group">
            <label for="email">Email：</label>
            <input id="email" th:value="${student.email}" type="text" class="form-control" name="email" placeholder="请输入邮箱地址"/>
          </div>

             <div class="form-group" style="text-align: center">
                <input class="btn btn-primary" id = "submit" value="提交" />
                <input class="btn btn-default" type="reset" value="重置" />
                <input id="back" class="btn btn-default" type="button" value="返回"/>
             </div>
        </form>
        </div>
    <script>
        $(function () {
            let image;
            $("input[type='file']").change(function () {
                let fd = new FormData();
                let file = $(this)[0].files
                fd.append("file",file[0])
                $.ajax({
                    url:'/upload',
                    type: "POST",
                    data: fd,
                    contentType: false,
                    processData: false,
                    success: (res) => {
                        $('#img').attr('src',`/download/image?path=${res}`)
                        image = res;
                    }
                })
            })
            $("#submit").click(function (){
                $.ajax({
                    url:'/students',
                    type: 'put',
                    contentType: 'application/json; charset=utf-8',
                    data: JSON.stringify({
                        id: $('#id').val(),
                        name: $("#name").val(),
                        image: image,
                        sex: $('input[checked]').val(),
                        age: $('#age').val(),
                        address: $('#address').val(),
                        qq: $("#qq").val(),
                        email: $("#email").val()
                    }),
                    success: (res) => {
                        alert(res)
                        if(res =='更新成功!!'){
                            location.href="/list"
                        }
                    }
                })
            })
            $("#back").click(function (){
                location.href = "/list"
            })
        })

    </script>
    </body>
</html>